<template>
    <div class="welcome" :class="{ gray: isGray }">
        <img class="logo" src="@/assets/login/logo.png" />
        <div class="main">
            <div class="banner-box">
                <span class="banner-title">数智赋能</span>
                <span class="banner-text">社区人群大数据分析、精准优化媒体资源</span>
                <img class="banner-img" src="@/assets/login/banner.png" />
            </div>
            <div v-loading="loginLoading" class="login-box">
                <!-- 微信扫一扫、手机号、账号登录 -->
                <div v-if="!isNext" class="login">
                    <span class="login-title">欢迎使用屏盟</span>
                    <el-tabs class="mt-40" v-model="tabActive">
                        <el-tab-pane label="手机号" name="phone">
                            <LoginForm v-if="tabActive === 'phone'" ref="loginFormRef" @next="handleNext"></LoginForm>
                        </el-tab-pane>
                        <el-tab-pane label="账号密码" name="account">
                            <AccountLogin v-if="tabActive === 'account'" ref="loginFormRef" @next="handleNext"></AccountLogin>
                        </el-tab-pane>
                        <el-tab-pane label="二维码登录" name="wechat">
                            <WxLogin></WxLogin>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="agree">
                        <span>登录表示同意</span>
                        <span class="btn" @click="showAgreeDialog(0)">服务协议</span>
                        <span>和</span>
                        <span class="btn" @click="showAgreeDialog(1)">隐私政策</span>
                    </div>
                </div>
                <!-- 发送短信 -->
                <Sms v-else ref="smsRef" :sms-info="smsInfo" @back="isNext = false" @getCode="isNext = false" />
            </div>
        </div>
        <!-- 协议 -->
        <Helper />
        <!-- iframe协议 -->
        <el-dialog v-model="agreeVisible" :title="agreeType === 0 ? '“屏盟”平台服务协议' : '隐私政策'" width="1000px">
            <iframe
                :src="agreeType === 0 ? '/pinmei/pmfwxy.html' : '/pinmei/pmyszc.html'"
                height="500"
                width="1000"
                frameborder="0"
            />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue';
import { sendSms } from '@/api/login';
import { useStore } from 'vuex';

import WxLogin from './components/Qrcode.vue';
import LoginForm from './components/LoginForm.vue';
import AccountLogin from './components/AccountLogin.vue';
import Helper from './components/Helper.vue';
import Sms from './components/Sms.vue';
import { SmsInfo } from './loginType';


sessionStorage.removeItem('currentRoute')

const store = useStore();

const tabActive = ref('phone');

const isNext = ref(false);

const agreeVisible = ref(false);

const agreeType = ref(0);

const smsRef: any = ref(null);

const loginFormRef: any = ref(null);

const loginLoading = computed(() => store.state.app.common.loginLoading);

const position = ref('absolute');

let smsInfo = reactive<SmsInfo>({
    phone: '',
    code: '',
    clientId: '',
    type: '1',
});

const handleNext = async ({ code, phone, clientId }: any) => {
    smsInfo.code = code;
    smsInfo.phone = phone;
    smsInfo.clientId = clientId;
    try {
        await sendSms({ ...smsInfo });
        isNext.value = true;
        !!smsRef.value && smsRef.value.handleGetCode();
    } catch (error: any) {
        !!loginFormRef.value && loginFormRef.value.resetCapcha();
    }
};

const showAgreeDialog = (type: number) => {
    agreeVisible.value = true;
    agreeType.value = type;
};

watch(tabActive, (n) => {
    position.value = n !== 0 ? 'relative' : 'absolute';
});

const isGray = ref(false);
fetch('https://puma-root.obs.cn-east-2.myhuaweicloud.com/ash/app_gray_config.json', {
    method: 'get',
})
    .then((res) => res.json())
    .then((res) => {
        if (res && +res === 1) {
            isGray.value = true;
        }
    });
</script>

<style lang="scss" scoped>
.gray {
    filter: grayscale(1);
}
.flex-box {
    display: flex;
}

.flex {
    flex: 1;
}

.b-center {
    justify-content: center;
    align-items: center;
}

.welcome {
    position: relative;
    width: 100vw;
    min-width: 1440px;
    height: 100vh;
    // min-height: 900px;
    overflow: hidden;
    background: url('@/assets/login/BG.png') no-repeat;
    background-size: cover;
    .logo {
        width: 84px;
        height: 48px;
        position: absolute;
        top: 40px;
        left: 40px;
    }
    .main {
        width: 100%;
        height: 100%;
        // padding: 0 360px 0 290px;
        padding: 0 calc((360 / 1920) * 100vw) 0 calc((290 / 1920) * 100vw);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .banner-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            .banner-title {
                font-size: 48px;
                font-weight: bold;
                color: #333;
            }
            .banner-text {
                font-size: 26px;
                color: #999;
                margin-top: 24px;
            }
            .banner-img {
                width: 436px;
                height: 344px;
                margin-top: 72px;
            }
        }
        .login-box {
            width: 440px;
            height: 500px;
            background: #fff;
            box-shadow: 0 0 24px 0 #990f381a;
            border-radius: 10px;
            padding: 40px;
            margin-top: 44px;
            z-index: 1;
            box-sizing: border-box;
            overflow: hidden;
        }

        .login {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .login-title {
                font-size: 28px;
                font-weight: bold;
                color: #252525;
            }
        }
        .agree {
            font-size: 12px;
            font-weight: 400;
            color: #808080;
            text-align: center;
            // margin-top: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;

            .btn {
                color: #4d88ff;
                cursor: pointer;
                margin: 0 4px;
            }

            .btn:last-child {
                margin-right: 0;
            }
        }
    }
}

::v-deep(.el-tabs) {
    flex: 1;
    .el-tabs__header {
        margin-bottom: 0;
        .el-tabs__nav-wrap::after {
            height: 0;
        }
        .el-tabs__active-bar {
            height: 3px;
        }
    }
    .el-tabs__item {
        font-size: 18px;
        color: #999;
        &.is-active {
            color: #252525;
        }
    }
    .el-tabs__content {
        padding-top: 40px;
    }
}

::v-deep(.el-dialog__body) {
    display: flex;
    justify-content: center;
}

::v-deep(.el-input-group__append) {
    padding: 0;
}
</style>
